<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<script src="../layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

<!-- 条件搜索区 -->
	<form class="layui-form">
		<div class="layui-form-item">
			<div class="layui-inline">
				<label class="layui-form-label">名字</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="title" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">开始日期</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="mindate" class="layui-input" id="test1">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">结束日期</label>
				<div class="layui-input-inline" style="width: 100px;">
					<input type="text" name="maxdate" class="layui-input" id="test2">
				</div>
			</div>
			<div class="layui-inline">
				<label class="layui-form-label">类型</label>
				<div class="layui-input-inline" style="width: 100px;">
					<select name="typeid" class="newsType">
						<option value="">--请选择--</option>
					</select>
				</div>
			</div>
			<button class="layui-btn" lay-submit lay-filter="souBtn">搜索</button>
		</div>
	</form>
	
	<!--条件搜索结束-->
	<table id="demo" lay-filter="test"></table>
	
	<!-- 工具栏模板：头部 -->
	<script type="text/html" id="toolbarDemo1">
			<div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
		  </div>
		</script>

	<!-- 工具栏模板：行内 -->
	<script type="text/html" id="toolbarDemo2">
			<div class="layui-btn-container">
		    <button class="layui-btn layui-btn-sm" lay-event="update">编辑</button>
			<button class="layui-btn layui-btn-sm" lay-event="delete">删除</button>
		  </div>
		</script>

	<!-- 添加弹窗 -->
	<div id="addDiv" style="display: none;">
		<form class="layui-form" id="addForm">
			<div class="layui-form-item">
				<label class="layui-form-label">新闻标题</label>
				<div class="layui-input-inline">
					<input type="text" name="title" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新闻内容</label>
				<div class="layui-input-inline">
					<input type="text" name="context" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新闻类型id</label>
				<div class="layui-input-inline">
					<input type="text" name="typeid" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">上传时间</label>
				<div class="layui-input-inline">
					<input type="text" id="shijian1"name="time" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否展示在首页</label>
				<div class="layui-input-inline">
					<input type="text" name="isShow" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="subBtnAdd">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 添加弹窗结束 -->

	<!-- 修改的弹窗 -->
	<div id="updateDiv" style="display: none;">
		<form class="layui-form" lay-filter="updateForm" id="updateForm">
			<div class="layui-form-item">
					<label class="layui-form-label">id</label>
					<div class="layui-input-inline">
						<input type="text" name="id"  placeholder="请输入" autocomplete="off" class="layui-input layui-disabled">
					</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新闻标题</label>
				<div class="layui-input-inline">
					<input type="text" name="title" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新闻内容</label>
				<div class="layui-input-inline">
					<input type="text" name="context" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">新闻类型id</label>
				<div class="layui-input-inline">
					<input type="text" name="typeid" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">上传时间</label>
				<div class="layui-input-inline">
					<input type="text"  id="shijian" name="time" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<label class="layui-form-label">是否展示在首页</label>
				<div class="layui-input-inline">
					<input type="text" name="isShow" placeholder="请输入" autocomplete="off"
						class="layui-input">
				</div>
			</div>
			<div class="layui-form-item">
				<div class="layui-input-block">
					<button class="layui-btn" lay-submit lay-filter="subBtnUpdate">立即提交</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改的弹窗结束 -->
	
	<script>
		layui.use(['table', 'form','layer','laydate'], function() {
			var table = layui.table;
			var $ = layui.$;
			var form = layui.form;
			var layer = layui.layer;
			var laydate= layui.laydate;
			var render =layui.render;

			//第一个实例
			table.render({
				elem : '#demo',
				url : 'NewsServletAdmin?method=getNews', //数据接口
				toolbar: '#toolbarDemo1',
				method: "post", //请求方式
				id:"idtest",
				page : true, //开启分页
				cols : [ [ //表头
				{
					field : 'id',
					title : 'ID',
					width : 80,
				},  {
					field : 'title',
					title : '新闻标题',
					width : 200
				}
				,  {
					field : 'context',
					title : '新闻内容',
					width : 144
				},  {
					field : 'typeid',
					title : '新闻类型id',
					width : 100
				},  {
					field : 'time',
					title : '新闻上传时间',
					width : 144
				},  {
					field : 'isShow',
					title : '是否展示在首页',
					width : 150
				},  {
					title: '操作',
					toolbar: '#toolbarDemo2',
					width : 120
				}] ]
			});
			
			
			//监听头部工具栏
			table.on('toolbar(test)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
					case 'add':
						layer.open({
							type: 1,
							area: ['500px', '700px'],
							content: $("#addDiv")
						});
						break;
				};
			});//监听头部工具栏end
			
			//监听表单提交----添加
			form.on('submit(subBtnAdd)', function(data) {
				//var url = "NewsServletAdmin?method=insertNews";//请求地址
				//var str = $("#addForm").serialize();//请求参数,表单中的数据,serialize序列化
				//console.log(str);// 名=值&名=值
				//ajax请求服务器,判断结果
				$.post("NewsServletAdmin?method=insertNews", data.field, function(res) {
					console.log(res);
					if(res.code==0){
						layer.msg(res.msg,{time:1000},function(){
							layer.closeAll();//关闭所有窗口
							table.reload('idtest',{})//表格重载
						})
					}
				}, "json")
			
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});//监听表单提交----添加end
			
			//监听行内部工具栏
			table.on('tool(test)', function(obj) {
				var data = obj.data; //获得当前行数据
				switch (obj.event) {
					case 'update':
						console.log(data);
						form.val("updateForm", data);
						layer.open({
							type: 1,
							area: ['500px', '600px'],
							content: $("#updateDiv"),
						});
						break;
					case 'delete':
						layer.confirm('要删除的类型id是'+data.id, function(index) {
							obj.del();
							layer.close(index);
							$.post("NewsServletAdmin?method=delNews", {
								"id" : data.id
							}, function(res) {
								layer.msg(res.msg);
							}, 'json')
						});
						break;
				};
			});//监听行内部工具栏 end
			
			//监听表单提交----修改
			form.on('submit(subBtnUpdate)', function(data) {
				var url = "NewsServletAdmin?method=updateNews"; //请求地址
				var str = $("#updateForm").serialize(); //请求参数,表单中的数据,serialize序列化
				//ajax请求服务器,判断结果
				$.post(url, str, function(res) {
					console.log(res);
					if(res.code==0){
						layer.msg(res.msg,{time:1000},function(){
							layer.closeAll();//关闭所有窗口
							table.reload('idtest',{})//表格重载
						})
					}
				}, "json")
				return false;
			});//监听表单提交----修改end
			
			//日期控件----修改
			laydate.render({
				elem : '#shijian'//指定元素
				,type:'date'
			});
			laydate.render({
				elem : '#shijian1'//指定元素
				,type:'date'
			});

			//监听表单提交----查询
			form.on('submit(souBtn)', function(data) {
				table.reload('idtest', {
					where : data.field
				})
				return false;
			});//监听表单提交----查询end

			//异步请求 获取 产品类型
			//1.ajax请求服务器获取产品类型列表
			$.post("NewsTypeServletAdmin?method=getNewsType", function(res) {
				console.log(res);
				if (res.code == 0) {
					//2.讲获取的数据渲染在下拉 列表
					for (var i = 0; i < res.data.length; i++) {
						$(".newsType").append(
								"<option value='"+res.data[i].id+"'>"
										+ res.data[i].name + "</option>")
					}
					//3刷新Select  重新渲染
					form.render('select');
				}
			}, "json")

			//日期范围选择
			laydate.render({
				elem : '#test1'
			});
			//日期范围选择
			laydate.render({
				elem : '#test2'
			});
			
			//监听提交--搜索
		      form.on('submit(souBtn)', function(data) {
		        table.reload('idTest', {where:data.field});
		        return false;
		      });
			
		})

	</script>

</body>
</html>